<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>商品详情页</title>
  <link rel="stylesheet" href="../css/detail.css">
  <link rel="stylesheet" href="../css/base.css">
</head>
<body>
  <div class="header container">
    商品详情页
    <p style="display: block;">
      <a href="./list.html">回到列表页</a>
    </p>
  </div>
  <div class="content container">
    <div class="left box">
      <div class="middleBox">
        <img src="" class="middleimg">
      </div>
    </div>
    <div class="right">
      <p class="title">商品名称</p>
      <p class="price">原价: ¥ <span class="old">0.00</span></p>
      <p class="price">折扣: ¥ <span class="discount">0.00</span></p>
      <p class="price">现价: ¥ <span class="curprice">0.00</span></p>
    </div>
  </div>
  <div class="desc container"></div>
  <script src="../lib/jquery.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>
    $(document).ready(function() {
      const urlParams = new URLSearchParams(window.location.search);
      const goodsId = urlParams.get('id');

      if (!goodsId) {
        alert('未找到商品ID');
        return;
      }

      axios.get(`http://localhost:9000/goods/item?id=${goodsId}`)
        .then(response => {
          if (response.data.code === 1) {
            const goods = response.data.info;
            $('.middleimg').attr('src', goods.img_big_logo);
            $('.title').text(goods.title);
            $('.old').text(goods.price);
            $('.discount').text(goods.sale_type);
            $('.curprice').text(goods.current_price);
            $('.desc').html(goods.goods_introduce);
          } else {
            alert('获取商品信息失败');
          }
        })
        .catch(error => {
          console.error('获取商品失败:', error);
        });
    });
  </script>
</body>
</html>
